<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>即时聊天 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --light-bg: #F9FAFB;
      --dark-bg: #111B21;
      --light-gray: #E5E7EB;
      --dark-gray: #374151;
      --light-text: #1F2937;
      --dark-text: #E5E7EB;
      --light-bubble: #FFFFFF;
      --dark-bubble: #202C33;
      --light-sent: #DCF8C6;
      --dark-sent: #005C4B;
      --border-light: #E5E7EB;
      --border-dark: #2F3B43;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      height: 100vh;
      overflow: hidden;
      margin: 0;
      transition: background-color 0.3s ease;
    }
    
    /* 聊天容器 */
    .chat-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      display: none;
    }
    
    .chat-container.active {
      display: flex;
    }
    
    /* 聊天头部 */
    .chat-header {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--border-light);
      background-color: var(--light-bg);
      z-index: 10;
    }
    
    .dark .chat-header {
      background-color: var(--dark-bg);
      border-bottom-color: var(--border-dark);
    }
    
    .back-btn {
      color: var(--primary);
      background: none;
      border: none;
      font-size: 20px;
      padding: 4px;
    }
    
    .contact-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .contact-info {
      flex: 1;
    }
    
    .contact-name {
      font-weight: 600;
      font-size: 16px;
      color: var(--light-text);
    }
    
    .dark .contact-name {
      color: var(--dark-text);
    }
    
    .online-status {
      font-size: 13px;
      color: var(--secondary);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .dark .online-status {
      color: var(--secondary);
    }
    
    .header-actions {
      display: flex;
      gap: 16px;
    }
    
    .header-action-btn {
      color: var(--light-text);
      background: none;
      border: none;
      font-size: 18px;
    }
    
    .dark .header-action-btn {
      color: var(--dark-text);
    }
    
    /* 聊天内容区 */
    .chat-messages {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      background-color: var(--light-bg);
      background-image: url('https://picsum.photos/id/1048/1000/1000');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    
    .dark .chat-messages {
      background-color: var(--dark-bg);
      background-image: url('https://picsum.photos/id/1049/1000/1000');
    }
    
    .message-time {
      text-align: center;
      font-size: 12px;
      color: var(--dark-gray);
      margin: 10px 0;
      padding: 4px 8px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.1);
      display: inline-block;
      margin-left: 50%;
      transform: translateX(-50%);
    }
    
    .dark .message-time {
      color: var(--light-gray);
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .message {
      margin-bottom: 12px;
      max-width: 75%;
      display: flex;
    }
    
    .message.received {
      align-self: flex-start;
    }
    
    .message.sent {
      margin-left: auto;
      flex-direction: row-reverse;
    }
    
    .message-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 8px;
    }
    
    .message.sent .message-avatar {
      margin-right: 0;
      margin-left: 8px;
      display: none; /* 自己发送的消息可以隐藏头像 */
    }
    
    .message-bubble {
      padding: 8px 12px;
      border-radius: 18px;
      position: relative;
      line-height: 1.4;
    }
    
    .received .message-bubble {
      background-color: var(--light-bubble);
      border-top-left-radius: 4px;
      color: var(--light-text);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    .dark .received .message-bubble {
      background-color: var(--dark-bubble);
      color: var(--dark-text);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .sent .message-bubble {
      background-color: var(--light-sent);
      border-top-right-radius: 4px;
      color: var(--light-text);
    }
    
    .dark .sent .message-bubble {
      background-color: var(--dark-sent);
      color: var(--dark-text);
    }
    
    .message-text {
      font-size: 15px;
    }
    
    .message-media {
      border-radius: 12px;
      overflow: hidden;
      max-width: 200px;
    }
    
    .message-image {
      width: 100%;
      display: block;
    }
    
    .message-status {
      font-size: 11px;
      margin-left: 8px;
      color: var(--dark-gray);
      align-self: flex-end;
    }
    
    .dark .message-status {
      color: var(--light-gray);
    }
    
    /* 输入区域 */
    .chat-input {
      padding: 8px 16px;
      background-color: var(--light-bg);
      border-top: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .dark .chat-input {
      background-color: var(--dark-bg);
      border-top-color: var(--border-dark);
    }
    
    .input-actions {
      display: flex;
      gap: 8px;
    }
    
    .input-action-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: none;
      border: none;
      color: var(--dark-gray);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dark .input-action-btn {
      color: var(--light-gray);
    }
    
    .message-input-container {
      flex: 1;
      position: relative;
    }
    
    .message-input {
      width: 100%;
      padding: 10px 16px;
      border-radius: 20px;
      border: 1px solid var(--border-light);
      background-color: var(--light-bubble);
      font-size: 15px;
      resize: none;
      height: 40px;
      overflow: hidden;
      color: var(--light-text);
    }
    
    .dark .message-input {
      background-color: var(--dark-bubble);
      border-color: var(--border-dark);
      color: var(--dark-text);
    }
    
    .message-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .send-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 聊天列表样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: var(--dark-bubble);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
      color: var(--light-text);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--dark-text);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
      color: var(--light-text);
    }
    
    .dark .style-option {
      color: var(--dark-text);
    }
    
    .style-option:hover {
      background-color: var(--light-bg);
    }
    
    .dark .style-option:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes messageIn {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes messageOut {
      from {
        opacity: 0;
        transform: translateX(20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    .received .message-bubble {
      animation: messageIn 0.3s ease forwards;
    }
    
    .sent .message-bubble {
      animation: messageOut 0.3s ease forwards;
    }
    
    @keyframes typing {
      0% { transform: scale(0.8); opacity: 0.5; }
      50% { transform: scale(1); opacity: 1; }
      100% { transform: scale(0.8); opacity: 0.5; }
    }
    
    .typing-indicator {
      display: inline-flex;
      gap: 4px;
      padding: 8px 12px;
    }
    
    .typing-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--dark-gray);
      animation: typing 1.4s infinite ease-in-out both;
    }
    
    .dark .typing-dot {
      background-color: var(--light-gray);
    }
    
    .typing-dot:nth-child(1) { animation-delay: -0.32s; }
    .typing-dot:nth-child(2) { animation-delay: -0.16s; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">聊天样式</div>
    <div class="style-option active" data-style="default">默认样式</div>
    <div class="style-option" data-style="dark">深色模式</div>
    <div class="style-option" data-style="modern">现代风格</div>
    <div class="style-option" data-style="minimal">极简风格</div>
  </div>
  
  <!-- 默认样式聊天界面 -->
  <div class="chat-container active" id="defaultChat">
    <!-- 聊天头部 -->
    <div class="chat-header">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <img src="https://picsum.photos/id/64/200/200" alt="联系人头像" class="contact-avatar">
      <div class="contact-info">
        <div class="contact-name">张设计师</div>
        <div class="online-status">
          <i class="fa fa-circle"></i>
          <span>在线</span>
        </div>
      </div>
      <div class="header-actions">
        <button class="header-action-btn" aria-label="电话">
          <i class="fa fa-phone"></i>
        </button>
        <button class="header-action-btn" aria-label="更多选项">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
    </div>
    
    <!-- 聊天内容区 -->
    <div class="chat-messages" id="messagesContainer">
      <div class="message-time">今天 10:23</div>
      
      <div class="message received">
        <img src="https://picsum.photos/id/64/200/200" alt="发送者头像" class="message-avatar">
        <div class="message-bubble">
          <div class="message-text">你好，我看到了你发布的网站设计任务</div>
        </div>
      </div>
      
      <div class="message sent">
        <img src="https://picsum.photos/id/91/200/200" alt="我的头像" class="message-avatar">
        <div class="message-bubble">
          <div class="message-text">你好！是的，我正在寻找合适的设计师</div>
        </div>
        <div class="message-status">10:25</div>
      </div>
      
      <div class="message received">
        <img src="https://picsum.photos/id/64/200/200" alt="发送者头像" class="message-avatar">
        <div class="message-bubble">
          <div class="message-text">我有5年企业官网设计经验，想了解一下具体需求</div>
        </div>
      </div>
      
      <div class="message sent">
        <img src="https://picsum.photos/id/91/200/200" alt="我的头像" class="message-avatar">
        <div class="message-bubble">
          <div class="message-text">主要是为科技公司设计官网，要求现代简约风格，需要包含首页、产品展示、关于我们和联系我们几个页面</div>
        </div>
        <div class="message-status">10:27</div>
      </div>
      
      <div class="message received">
        <img src="https://picsum.photos/id/64/200/200" alt="发送者头像" class="message-avatar">
        <div class="message-bubble">
          <div class="message-text">我可以提供几个类似的案例给你参考</div>
        </div>
      </div>
      
      <div class="message received">
        <img src="https://picsum.photos/id/64/200/200" alt="发送者头像" class="message-avatar">
        <div class="message-bubble message-media">
          <img src="https://picsum.photos/id/180/400/300" alt="设计案例" class="message-image">
        </div>
      </div>
      
      <div class="message sent">
        <img src="https://picsum.photos/id/91/200/200" alt="我的头像" class="message-avatar">
        <div class="message-bubble">
          <div class="message-text">这个风格不错，很符合我们的需求</div>
        </div>
        <div class="message-status">10:30</div>
      </div>
      
      <div class="message sent">
        <img src="https://picsum.photos/id/91/200/200" alt="我的头像" class="message-avatar">
        <div class="message-bubble">
          <div class="message-text">你能给我一个大概的报价和时间周期吗？</div>
        </div>
        <div class="message-status">
          <i class="fa fa-check"></i>
        </div>
      </div>
      
      <div class="message received">
        <img src="https://picsum.photos/id/64/200/200" alt="发送者头像" class="message-avatar">
        <div class="message-bubble">
          <div class="typing-indicator">
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
            <div class="typing-dot"></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 输入区域 -->
    <div class="chat-input">
      <div class="input-actions">
        <button class="input-action-btn" aria-label="图片">
          <i class="fa fa-image"></i>
        </button>
        <button class="input-action-btn" aria-label="表情">
          <i class="fa fa-smile-o"></i>
        </button>
        <button class="input-action-btn" aria-label="更多">
          <i class="fa fa-plus"></i>
        </button>
      </div>
      <div class="message-input-container">
        <textarea class="message-input" placeholder="输入消息..."></textarea>
      </div>
      <button class="send-btn" aria-label="发送">
        <i class="fa fa-paper-plane"></i>
      </button>
    </div>
  </div>
  
  <!-- 深色模式聊天界面 -->
  <div class="chat-container dark" id="darkChat">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 现代风格聊天界面 -->
  <div class="chat-container" id="modernChat">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 极简风格聊天界面 -->
  <div class="chat-container" id="minimalChat">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 复制聊天内容到其他样式容器
    const defaultChat = document.getElementById('defaultChat');
    document.getElementById('darkChat').innerHTML = defaultChat.innerHTML;
    document.getElementById('modernChat').innerHTML = defaultChat.innerHTML;
    document.getElementById('minimalChat').innerHTML = defaultChat.innerHTML;
    
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const chatContainers = document.querySelectorAll('.chat-container');
    const messageInputs = document.querySelectorAll('.message-input');
    const sendButtons = document.querySelectorAll('.send-btn');
    const backButtons = document.querySelectorAll('.back-btn');
    
    // 当前激活的样式索引
    let currentStyleIndex = 0;
    
    // 切换聊天样式
    styleOptions.forEach((option, index) => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 隐藏当前聊天容器
        chatContainers.forEach(container => container.classList.remove('active'));
        
        // 显示选中的聊天容器
        const styleId = this.getAttribute('data-style') + 'Chat';
        document.getElementById(styleId).classList.add('active');
        
        // 更新当前样式索引
        currentStyleIndex = index;
      });
    });
    
    // 为所有聊天容器添加发送消息功能
    chatContainers.forEach(container => {
      const input = container.querySelector('.message-input');
      const sendBtn = container.querySelector('.send-btn');
      const messagesContainer = container.querySelector('.chat-messages');
      
      // 自动调整输入框高度
      input.addEventListener('input', function() {
        this.style.height = 'auto';
        // 限制最大高度为120px
        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
      });
      
      // 发送消息
      function sendMessage() {
        const messageText = input.value.trim();
        if (messageText) {
          // 创建新消息元素
          const messageTime = new Date().getHours() + ':' + 
                            (new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes());
          
          const messageHtml = `
            <div class="message sent">
              <img src="https://picsum.photos/id/91/200/200" alt="我的头像" class="message-avatar">
              <div class="message-bubble">
                <div class="message-text">${messageText}</div>
              </div>
              <div class="message-status">${messageTime}</div>
            </div>
          `;
          
          // 移除正在输入指示器（如果存在）
          const typingIndicator = messagesContainer.querySelector('.typing-indicator').closest('.message');
          if (typingIndicator) {
            typingIndicator.remove();
          }
          
          // 添加新消息
          messagesContainer.insertAdjacentHTML('beforeend', messageHtml);
          
          // 清空输入框并重置高度
          input.value = '';
          input.style.height = '40px';
          
          // 滚动到底部
          messagesContainer.scrollTop = messagesContainer.scrollHeight;
          
          // 模拟对方回复
          setTimeout(() => {
            const replies = [
              "好的，我明白了",
              "我会尽快处理",
              "这个需求没问题",
              "我稍后给你回复更多细节",
              "可以的，没问题"
            ];
            
            const randomReply = replies[Math.floor(Math.random() * replies.length)];
            
            const replyHtml = `
              <div class="message received">
                <img src="https://picsum.photos/id/64/200/200" alt="发送者头像" class="message-avatar">
                <div class="message-bubble">
                  <div class="message-text">${randomReply}</div>
                </div>
              </div>
            `;
            
            messagesContainer.insertAdjacentHTML('beforeend', replyHtml);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
          }, 1500);
        }
      }
      
      // 点击发送按钮发送消息
      sendBtn.addEventListener('click', sendMessage);
      
      // 按Enter键发送消息（Shift+Enter换行）
      input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          sendMessage();
        }
      });
    });
    
    // 返回按钮功能
    backButtons.forEach(button => {
      button.addEventListener('click', function() {
        alert('返回聊天列表（实际应用中会导航到聊天列表页面）');
      });
    });
    
    // 初始化 - 滚动到最新消息
    chatContainers.forEach(container => {
      const messagesContainer = container.querySelector('.chat-messages');
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    });
    
    // 添加现代风格和极简风格的特殊样式
    const style = document.createElement('style');
    style.textContent = `
      /* 现代风格 */
      #modernChat .received .message-bubble {
        border-radius: 12px;
        background-color: #EEF2F5;
      }
      
      #modernChat .sent .message-bubble {
        border-radius: 12px;
        background-color: #3B82F6;
        color: white;
      }
      
      #modernChat .chat-input {
        background-color: white;
        border-top: none;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      }
      
      #modernChat .message-input {
        border: 1px solid #E5E7EB;
        background-color: #F9FAFB;
      }
      
      #modernChat .send-btn {
        background-color: #3B82F6;
      }
      
      /* 极简风格 */
      #minimalChat .chat-header {
        padding: 10px 16px;
        background-color: white;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      }
      
      #minimalChat .received .message-bubble {
        background-color: #F3F4F6;
        border-radius: 8px;
      }
      
      #minimalChat .sent .message-bubble {
        background-color: #3B82F6;
        color: white;
        border-radius: 8px;
      }
      
      #minimalChat .input-actions {
        display: none;
      }
      
      #minimalChat .message-input {
        padding: 12px 16px;
      }
      
      #minimalChat .send-btn {
        background-color: #3B82F6;
      }
    `;
    document.head.appendChild(style);
  </script>
</body>
</html>
